<template>
  <div class="wp-box">
    <div class="check-1">
        <p class="check-p">{{ newData[0].Name }}</p>
        <el-radio-group v-model="checked" @change="agreementOne">
          <el-radio 
            class="portraitBox"
            v-for="(item, index) in newData[0].contentList"
            :label="item.Id"
            :key="index"
            >{{ item.Describe }}
          </el-radio >
        </el-radio-group>
    </div>
    <div class="check-2">
        <p class="check-p">{{ newData[1].Name }}</p>
        <el-radio-group v-model="checkedTwo" @change="agreementTwo">
          <el-radio 
            class="portraitBox"
            v-for="(item, index) in newData[1].contentList"
            :label="item.Id"
            :key="index"
            >{{ item.Describe }}
          </el-radio >
        </el-radio-group>
    </div>
    <div class="check-3">
        <p class="check-p">{{ newData[2].Name }}</p>
        <el-radio-group v-model="checkedThree" @change="agreementThree">
          <el-radio 
            class="portraitBox"
            v-for="(item, index) in newData[2].contentList"
            :label="item.Id"
            :key="index"
            >{{ item.Describe }}
          </el-radio >
        </el-radio-group>
    </div>
    <div class="check-4">
        <p class="check-p">{{ newData[3].Name }}</p>
        <el-radio-group v-model="checkedFour" @change="agreementFour">
          <el-radio 
            class="portraitBox"
            v-for="(item, index) in newData[3].contentList"
            :label="item.Id"
            :key="index"
            >{{ item.Describe }}
          </el-radio >
        </el-radio-group>
    </div>
  </div>
</template>
  
  <script>
import { defineComponent, toRaw } from "vue";
export default defineComponent({
  name: "",
  components: {},
  data() {
    return {
      checked: 1,
      checkedTwo: 3,
      checkedThree: 8,
      checkedFour: 13,
      checkedList1: [],
      checkedList2: [],
      checkedList3: [],
      checkedList4: [],
      SubList: [],
      newData: [
        {
          Name: "组合导航系统",
          contentList: [
            {
              Id: 1,
              Describe: "组合导航系统标定至前轴中心",
              Type: 'Navigation',
            },
            {
              Id: 2,
              Describe: "组合导航系统标定至后轴中心",
              Type: 'Navigation',
            },
          ],
        },
        {
          Name: "激光雷达系统",
          contentList: [
            {
              Id: 3,
              Describe: "激光雷达系统标定至前轴中心",
              Type: 'Lidar',
            },
            {
              Id: 4,
              Describe: "激光雷达系统标定至后轴中心",
              Type: 'Lidar',
            },
            {
              Id: 5,
              Describe: "激光雷达系统标定至组合导航系统",
              Type: 'Lidar',
            },
            {
              Id: 6,
              Describe: "激光雷达系统标定至毫米波雷达系统",
              Type: 'Lidar',
            },
            {
              Id: 7,
              Describe: "激光雷达系统标定至双目相机系统",
              Type: 'Lidar',
            },
          ],
        },
        {
          Name: "毫米波雷达系统",
          contentList: [
            {
              Id: 8,
              Describe: "毫米波雷达系统标定至前轴中心",
              Type: 'MillimeterWave',
            },
            {
              Id: 9,
              Describe: "毫米波雷达系统标定至后轴中心",
              Type: 'MillimeterWave',
            },
            {
              Id: 10,
              Describe: "毫米波雷达系统标定至组合导航系统",
              Type: 'MillimeterWave',
            },
            {
              Id: 11,
              Describe: "毫米波雷达系统标定至激光雷达系统",
              Type: 'MillimeterWave',
            },
            {
              Id: 12,
              Describe: "毫米波雷达系统标定至双目相机系统",
              Type: 'MillimeterWave',
            },
          ],
        },
        {
          Name: "双目相机系统",
          contentList: [
            {
              Id: 13,
              Describe: "双目相机系统标定至前轴中心",
              Type: 'Camera',
            },
            {
              Id: 14,
              Describe: "双目相机系统标定至后轴中心",
              Type: 'Camera',
            },
            {
              Id: 15,
              Describe: "双目相机系统标定至组合导航系统",
              Type: 'Camera',
            },
            {
              Id: 16,
              Describe: "双目相机系统标定至毫米波雷达系统",
              Type: 'Camera',
            },
            {
              Id: 17,
              Describe: "双目相机系统标定至激光雷达系统",
              Type: 'Camera',
            },
          ],
        },
      ],
    };
  },
  created() {
    this.Echo();
  },
  methods: {
    // 回显方法
    Echo() {
      this.ProtocolConfig =
        JSON.parse(sessionStorage.getItem("FusionCalibrationList")) || [];
      // console.log('回显ProtocolConfig',this.ProtocolConfig);
      if(this.ProtocolConfig.length > 0) {
        this.newData.forEach((i) => {
          if(i.Name == '组合导航系统') {
            this.checked = this.ProtocolConfig[0]
          } else if(i.Name == '激光雷达系统') {
            this.checkedTwo = this.ProtocolConfig[1]
          } else if(i.Name == '毫米波雷达系统') {
            this.checkedThree = this.ProtocolConfig[2]
          } else if(i.Name == '双目相机系统') {
            this.checkedFour = this.ProtocolConfig[3]
          }
        });
      }

      // this.ProtocolConfig.forEach((item) => {
      //   item.Properties.forEach((items) => {
      //     this.newData.forEach((i) => {
      //       i.contentList.forEach((val) => {
      //         console.log('回显val',val);
      //         // if (val.Attribute == items) {
      //         //   this.checked.push(val);
      //         // }
      //       });
      //     });
      //   });
      // });
    },
    agreementOne(data) {
      console.log('agreementOne',data);
      this.checkedList1.push(data)
      // let newId = [];
      // data.forEach((item) => {
      //   newId.push(item.CanId);
      // });
      // let newArrId = new Set(newId);
      // let ArrData = [];
      // newArrId.forEach((j) => {
      //   data.forEach((k) => {
      //     if (k.CanId == j) {
      //       ArrData.push({ Id: k.CanId, Properties: [] });
      //     }
      //   });
      // });
      // ArrData.forEach((l, index) => {
      //   data.forEach((v) => {
      //     if (v.CanId == l.Id) {
      //       let newDatas = [];
      //       v.Data.split(" ").forEach((o) => {
      //         newDatas.push(Number.parseInt(o, [16]));
      //       });
      //       l.Data = newDatas;
      //       l.Properties.push(v.Attribute);
      //     }
      //   });
      // });
      // let newDataList = ArrData.filter(function (element, index, self) {
      //   return self.findIndex((el) => el.Id == element.Id) === index;
      // });
      // this.SubList = newDataList;
    },
    agreementTwo(data) {
      console.log('agreementTwo',data);
      this.checkedList2.push(data)
    },
    agreementThree(data) {
      console.log('agreementThree',data);
      this.checkedList3.push(data)
    },
    agreementFour(data) {
      console.log('agreementFour',data);
      this.checkedList4.push(data)
    },
    Sub() {
      this.SubList.push(this.checked)
      this.SubList.push(this.checkedTwo)
      this.SubList.push(this.checkedThree)
      this.SubList.push(this.checkedFour)
      // console.log('this.checkedList1',this.checkedList1);
      // this.checkedList1.forEach((element,index) => {
      //   if(this.checkedList1.length-1 == index) {
      //     this.SubList.push(element)
      //   }
      // });
      // console.log('this.checkedList2',this.checkedList2);
      // this.checkedList2.forEach((element,index) => {
      //   if(this.checkedList2.length-1 == index) {
      //     this.SubList.push(element)
      //   }
      // });
      // console.log('this.checkedList3',this.checkedList3);
      // this.checkedList3.forEach((element,index) => {
      //   if(this.checkedList3.length-1 == index) {
      //     this.SubList.push(element)
      //   }
      // });
      // console.log('this.checkedList4',this.checkedList4);
      // this.checkedList4.forEach((element,index) => {
      //   if(this.checkedList4.length-1 == index) {
      //     this.SubList.push(element)
      //   }
      // });
      console.log('this.SubList',this.SubList);
      this.$emit("ok", this.SubList);
    },
  },
});
</script>
  
<style lang="less" scoped>
/deep/.el-icon {
  display: none;
}
/deep/.el-tree-node__label {
  font-size: 18px;
}
/deep/.el-tree-node__content {
  padding: 4px 0;
}
.tree-1 {
  margin-left: 20px;
  margin-top: 30px;
  padding-bottom: 20px;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1b1b1d;
}
.check-1 {
  margin-left: 20px;
  margin-top: 30px;
}
.check-p {
  color: #1b1b1d;
  padding-left: 14px;
  font-size: 18px;
}
.check-tit {
  color: #1b1b1d;
  margin-bottom: 8px;
  font-size: 18px;
}
.portraitBox {
  height: 32px;
  padding-left: 26px;
  padding-right: 80px;
}
</style>